/* 商品管理修改 */
<template>
  <div class="app-container">
    <div style="padding:20px;min-height:740px">
        <div style="margin-bottom:16px">
            <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
            <span style="display: inline-block;font-weight: 500;color: #333333;font-size: 16px;">商品详情</span>
        </div>
        <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="商品编码">{{commodityDetail.code}}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="商品名称">{{commodityDetail.name}}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="ERP商品名称">{{commodityDetail.erpName}}</el-descriptions-item>
            <el-descriptions-item label="副名称">{{commodityDetail.subName}}</el-descriptions-item>
            <el-descriptions-item label="商品型号">{{commodityDetail.model}}</el-descriptions-item>
            <el-descriptions-item label="规格代号">{{commodityDetail.specifications}}</el-descriptions-item>
            <el-descriptions-item label="默认单位">{{commodityDetail.defaultUnitName}}</el-descriptions-item>
            <el-descriptions-item label="适应环境温度">{{commodityDetail.temperature}}</el-descriptions-item>
            <el-descriptions-item label="参图号">{{commodityDetail.referencedNumber}}</el-descriptions-item>
            <el-descriptions-item label="目标重量">{{commodityDetail.targetWeight}}</el-descriptions-item>
            <el-descriptions-item label="使用状态">{{commodityDetail.erpStatus == '00'?'可用':commodityDetail.erpStatus == '01'?'禁用':commodityDetail.erpStatus == '02'?'反审核中':''}}</el-descriptions-item>
            <el-descriptions-item label="是否是套包">{{commodityDetail.groupGoods?'是':'否'}}</el-descriptions-item>
            <el-descriptions-item label="商品类型">{{commodityDetail.attribute == '010'?'物资':commodityDetail.attribute == '020'?'服务':''}}</el-descriptions-item>
            <el-descriptions-item label="辅助单位">{{commodityDetail.auxiliaryUnitName}}</el-descriptions-item>
            <el-descriptions-item label="辅助单位数量">{{commodityDetail.transferStandard}}</el-descriptions-item>
            <el-descriptions-item :span="3" label="设计备注">{{commodityDetail.releaseNotes}}</el-descriptions-item>
        </el-descriptions>
        <div style="width:100%;height:20px"></div>
        <div style="margin-bottom:16px">
            <span style="display: inline-block; color: #333333; font-size: 14px;">编辑信息</span>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="商品分类" prop="goodsClassId">
                        <el-select v-model="form.goodsClassId" placeholder="请选择" @change="changeClass" style="width:100%" clearable>
                            <el-option
                                v-for="item in goodsClassOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="商品类别" prop="category">
                        <el-select v-model="form.category" placeholder="请选择" style="width:100%" clearable>
                            <el-option
                                v-for="item in dict.type.basic_data_goods_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="品牌" prop="brand">
                        <el-select v-model="form.brand" placeholder="请选择" style="width:100%" clearable>
                            <el-option
                                v-for="item in dict.type.basic_data_goods_brand"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订货分类" prop="orderClassId">
                        <el-select v-model="form.orderClassId" placeholder="请选择" style="width:100%" clearable>
                            <el-option
                                v-for="item in orderClassOptions"
                                :key="item.id"
                                :disabled="item.disabled"
                                :label="item.name"
                                :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="最小包装数量" prop="minPackage">
                        <el-input v-model="form.minPackage" placeholder="请输入" maxlength="10" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="起订量换算系数" prop="convertStandard">
                        <el-input v-model="form.convertStandard" placeholder="请输入" maxlength="10" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="最低起运量" prop="minQuantity">
                        <el-input v-model="form.minQuantity" placeholder="请输入" maxlength="10" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="上架状态" prop="status">
                        <el-select v-model="form.status" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in dict.type.basic_data_goods_status"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 12}" maxlength="500" show-word-limit placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template v-if="commodityDetail.groupGoods">
          <div style="margin-bottom:16px">
              <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
              <span style="display: inline-block;font-weight: 500;color: #333333;font-size: 16px;">套包明细</span>
          </div>
          <div>
            <el-table
              :data="form.groupDetailList ? form.groupDetailList : []" 
              ref="filterTable"
              :row-style="{height:'47px'}"
              border
            >
              <el-table-column label="序号" align="center" type="index" width="60"/>
              <el-table-column label="商品编码" align="center" prop="code" min-width="180"></el-table-column>
              <el-table-column label="商品名称" align="center" prop="name" min-width="180" show-overflow-tooltip></el-table-column>
              <el-table-column label="数量" align="center" prop="amount" min-width="120" show-overflow-tooltip></el-table-column>
              <el-table-column label="商品类别" align="center" prop="category" min-width="160" show-overflow-tooltip :formatter="row => getGoodsType(row.category)"></el-table-column>
              <el-table-column label="商品分类" align="center" prop="goodsClassName" min-width="160" show-overflow-tooltip></el-table-column>
              <el-table-column label="品牌" align="center" prop="brand" min-width="140"  :formatter="row => getBrandType(row.brand)"></el-table-column>
              <el-table-column label="上架状态" align="center" prop="status" min-width="140" :formatter="row => getStatusType(row.status)"></el-table-column>
              <el-table-column label="参图号" align="center" prop="referencedNumber" min-width="140"></el-table-column>
              <el-table-column label="设计备注" align="center" prop="releaseNotes" min-width="140"></el-table-column>
            </el-table>
          </div>
        </template>

    </div>
    <div class="h84_line"></div>
    <div class="bottom-btn">
        <div class="bottom-locate" >
            <el-button type="default" @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import QueryTableRender from "@/components/QueryTableRender";
import { updateGoods, getGoods, listGoodsClassSelect, listOrderClassSelect } from "@/api/basic/commodity";
import { getToken } from "@/utils/auth";
import { number } from 'echarts';

export default {
  name: "CommodityManageEdit",
  dicts: ['basic_data_goods_type','basic_data_goods_brand','basic_data_goods_status','basic_data_customer_erp_status'],
  components: {QueryTableRender},
  data() {
    const accountNameValidator = (rule, value, callback) => {
      console.log(value)
    // const reg = /(^[0-9]\d*$)/;
      const reg = /^([1-9]\d*|0)(\.\d*[1-9])?$/
      if (value == '' || reg.test(value) || value == null) {
        callback()
      } else {
        callback(new Error('必须为0或正整数'))
      }
    }
    const accountNameValidators = (rule, value, callback) => {
      console.log(value)
    const reg = /(^[1-9]\d*$)/;
      // const reg = /^([1-9]\d*|0)(\.\d*[1-9])?$/
      if (value == '' || reg.test(value) || value == null) {
        callback()
      } else {
        callback(new Error('必须为正整数'))
      }
    }
    return {
      form: {},
      queryModel:{},
      rules:{
        goodsClassId:[
          { required: true, message: '请选择商品分类', trigger: 'blur' }
        ],
        orderClassId:[
          { required: true, message: '请选择订货分类', trigger: 'blur' }
        ],
        code: [
          { required: true, message: "合同编号不能为空", trigger: "blur" },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择上架状态', trigger: 'blur' }
        ],
        minPackage: [
          { required: true, message: "最小发货数量不能为空", trigger: "blur" },
          {validator: accountNameValidators, trigger: 'blur'}
        ],
        minQuantity: [
          {validator: accountNameValidator, trigger: 'blur'}
        ],
        convertStandard: [
          {validator: accountNameValidators, trigger: 'blur'}
        ]
      },
      editVisible: false,
      curRecord: null,
      customerValue: [], //  价目数据
      customerData: [],
      loading:false,
      height:200,
      contractList:[],
      total:0,
      commodityDetail:{},//详情获取
      businessOptions:[],//归属人员
      contracts:{},
      goodsClassOptions:[],
      orderClassOptions:[]
    }
  },
  created() {
    this.getCommodityDetail();
    // console.log(this.$store.getters.level,'12321',this.$store.getters.templateId)
  },
  activated() {},
  updated() {},
  watch: {
    $route() {
        // location.reload();
        this.getCommodityDetail();
    },
    // businessDeptId() {
    //   if (this.$refs.refHandle) {
    //     this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
    //   }
    // }
  },
  methods: {
    /**
     * @param {*} value 
     */
     getGoodsType(value) {
      let show = '';
      this.dict.type.basic_data_goods_type.some((item) => {
        if (value == item.value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },
    getBrandType(value){
      let show = '';
      this.dict.type.basic_data_goods_brand.some((item) => {
        if (value == item.value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },
    getStatusType(value){
      let show = '';
      this.dict.type.basic_data_goods_status.some((item) => {
        if (value == item.value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },
    // 表单重置
    reset() {
      this.form = {
        goodsClassId: undefined,
        category: undefined,
        brand: undefined,
        orderClassId: undefined,
        minPackage: 1,
        minQuantity: 0,
        status: 'false',
        remark: undefined,
        convertStandard:undefined
      };
      this.resetForm("form");
    },
    /** 获取商品详情 */
    getCommodityDetail() {
        // console.log(this.$route.query.goodsId)
        if(this.$route.query.goodsId){
            this.reset();
            const str = {
                goodsId:JSON.parse(this.$route.query.goodsId)
            }
            getGoods(str).then(response => {
                this.commodityDetail = response.data;
                this.form = response.data;
                if(!this.form.status){
                  this.form.status = 'false'
                }
                this.form.minPackage = this.form.minPackage?parseInt(this.form.minPackage):1
                console.log(this.form)
            });
            listGoodsClassSelect().then(response => {
                this.goodsClassOptions = response.data
            });
            listOrderClassSelect().then(response => {
                this.orderClassOptions = response.data
                this.orderClassOptions.forEach(item => {
                  if(item.status == 'DISABLE'){
                    item.disabled = true
                  }
                });
                console.log(this.orderClassOptions)
            });
        }
        
    },
    //选择商品分类
    changeClass(val) {
      // console.log(val)
      for(let i=0;i<this.goodsClassOptions.length;i++){
        if(val == this.goodsClassOptions[i].id){
          this.form.category = this.goodsClassOptions[i].category
        }
      }
    },
    //提交
    submitForm() {
        this.$refs["form"].validate(valid => {
        if (valid) {
            const str = this.form;
            // str.businessDeptId = str.businessDeptId[str.businessDeptId.length-1]
            updateGoods(str).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel();
            });
        }
      });
    },
    /** 取消 */
    cancel() {
      const obj = { path: "/basicData/commodityManage" };
      this.$tab.closeOpenPage(obj);
    },
  }
}
</script>

<style lang="scss">

/* 注意此处不能有scoped 否则样式无法生效 */
// .el-cascader-panel{
//   .el-radio__inner{
//     border: 0px;
//     background:transparent;
//   }
//   .el-radio__input.is-checked .el-radio__inner{
//     background:none;
//   }
//   .el-radio{
//     height: 100%;
//     width: 150px;
//     position: absolute;
//     z-index: 10;
//   }
// }
</style>